<!--
 * @Author: C.
 * @Date: 2023-04-13 11:05:19
-->
<template>
  <Block title="审核流" :loading="loadingRef">
    <Steps :current="current" v-if="nodeList.length !== 0">
      <Step title="开始" />
      <Step v-for="item in nodeList" :key="item.Id" :title="item.Name">
        <template #subTitle>
          <Tag v-if="item.ApproveState" :color="auditEnum.getItem(item.ApproveState)?.color">{{
            auditEnum.getLabel(item.ApproveState)
          }}</Tag>
        </template>
        <template #description>
          <div><Button type="link" @click="viewNode(item)">查看详情</Button></div>
          <div v-if="item.ApprovedAt">{{
            dateUtil(item.ApprovedAt).format('YYYY-MM-DD hh:ss')
          }}</div>
        </template>
      </Step>
      <Step title="结束" />
    </Steps>
    <Empty v-else />
  </Block>
  <AuditDetailDrawer @register="registerDrawer" width="25%" />
</template>

<script lang="ts" setup name="AuditFlow">
  import { ref, computed, PropType, watchEffect } from 'vue';
  import { Step, Steps, Tag, Button, Empty } from 'ant-design-vue';
  import auditEnum from '/@/maps/baseData/auditEnum';
  import { dateUtil } from '/@/utils/dateUtil';
  import { useDrawer } from '/@/components/Drawer';
  import AuditDetailDrawer from './AuditDetailDrawer.vue';
  import { INode } from './types';
  import { get_audit_flow_by_bill_gui } from '/@/api/work/system/audit';
  const [registerDrawer, { openDrawer }] = useDrawer();

  const props = defineProps({
    process: {
      type: Array as PropType<INode[]>,
    },
    billGui: {
      type: String as PropType<string>,
    },
  });
  const nodeList = ref<INode[]>([]);
  const loadingRef = ref<boolean>(true);
  const current = computed(() => {
    let index = nodeList.value.findIndex((item) => {
      return item.ApproveState === 'WaitToProcess';
    });
    if (index == -1) {
      if (nodeList.value.length == 0) {
        index = -1;
      } else {
        index = nodeList.value.length;
      }
    }
    return index + 1;
  });
  function viewNode(nodeContent) {
    openDrawer(true, {
      nodeContent,
    });
  }
  // onMounted(async () => {
  //   let res = await get_audit_flow_by_bill_gui({ BillGui: '1646353989446402049' });
  //   // console.log(res);
  //   nodeList.value = res;
  // });
  watchEffect(async () => {
    if (props.process) {
      nodeList.value = props.process || [];
    } else if (props.billGui) {
      nodeList.value = await get_audit_flow_by_bill_gui({ BillGui: props.billGui });
    }
    loadingRef.value = false;
  });
</script>
<style lang="less" scoped></style>
